<template>
  <div>
    <h4>日期</h4>
    <el-row>
      <el-col :span="6">
        <el-date-picker
            v-model="date1"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </el-col>
      <el-col :span="8">
        <el-date-picker
            v-model="date2"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-col>
      <el-col :span="8">
        <el-date-picker
            v-model="date3"
            type="monthrange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-col>
    </el-row>
    <h4>时间</h4>
    <el-row>
      <el-col :span="6">
        <el-time-picker
            v-model="time1"
            placeholder="任意时间">
        </el-time-picker>
      </el-col>
      <el-col :span="6">
        <el-time-select
            v-model="time2"
            :picker-options="{start: '08:30',step: '00:15',end: '18:30'}"
            placeholder="选择时间">
        </el-time-select>
      </el-col>
      <el-col :span="12">
        <el-time-select
            placeholder="起始时间"
            v-model="startTime"
            :picker-options="{start: '08:30',step: '00:15',end: '18:30' }">
        </el-time-select>
        <el-time-select
            placeholder="结束时间"
            v-model="endTime"
            :picker-options="{start: '08:30',step: '00:15',end: '18:30',  minTime: startTime }">
        </el-time-select>
      </el-col>
    </el-row>
    <h4>日期+时间</h4>
    <el-row>
      <el-col :span="6">
        <el-date-picker
            v-model="datetime1"
            type="datetime"
            placeholder="选择日期时间">
        </el-date-picker>
      </el-col>
      <el-col :span="12">
        <el-date-picker
            v-model="datetime2"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date1: '',
      date2: '',
      date3: '',
      time1: '',
      time2: '',
      time3: '',
      startTime:'',
      endTime:'',
      datetime1:'',
      datetime2:''
    }
  }
}
</script>

<style scoped>
.el-row ,h4 {
  margin-top: 20px;
}
</style>